<template>
	<view>
		<div class="text_box" :style="{'background':bgColor}">
			<div class="mo1" :style="{'display':!showSwitch?'block':'none'}" >
				<div @click="clickMarquee()" class="move_box" id="marquee-content">
					<text :style="{fontSize: fontValue +'px','color':fontColor,'--speed':10-speed+'s', 'animation-play-state':state}">{{showText}}</text>
				</div>
			</div>
			
			<div class="mo2" :style="{'display':showSwitch?'block':'none'}" >
				<div @click="clickMarquee()" :style="{fontSize: fontValue +'px'}">
					<span v-for="(item,index) in showText.split('')" :style="{'--o':index}">{{item}}</span>
				</div>
			</div>
		</div>
		
		
		<!-- 设置项弹窗 -->
		<u-popup :show="showPopup" mode="center" :round="10" closeable bgColor="rgba(255, 255, 255, 0.7)" @close="close">
			<view class="popup-container ">
				<scroll-view scroll-y class="popup-scroll popup-container-left u-border-right">
					<text class="set-title">展示文本</text>
					<u--textarea v-model="showText" placeholder="文字滚动" maxlength="30" autoHeight></u--textarea>
					<text class="set-title">字体大小</text>
					<u-slider class="u-flex-fill" min=14 max=150  v-model="fontValue"></u-slider>
					<text class="set-title">滚动速度</text>
					<u-slider class="u-flex-fill" min="1" max="9" v-model="speed"></u-slider>
					<text class="set-title">霓虹灯</text>
					<u-switch class="u-flex-fill" activeColor="rgb(253, 0, 21)" v-model="showSwitch" @change="change"></u-switch>
				</scroll-view>
				<scroll-view scroll-y class="popup-scroll popup-container-right">
					<text class="set-title">字体颜色</text>
					<picker-color :defaultColorIndex="fontColorIndex" @pickerColor="pickerFont"></picker-color>
					<text class="set-title">背景颜色</text>
					<picker-color :defaultColorIndex="bgColorIndex" @pickerColor="pickerBg"></picker-color>
				</scroll-view>
			</view>
		</u-popup>
	<!-- 设置按钮 -->
		<view v-show="playState != 'play'" class="fixed-footer">
			<uni-icons type="setting"  :color="bgColor == '#ffffff' ? '#000' : '#fff'" size="40" @click="setting"></uni-icons>
			<!-- <u-icon name="setting"></u-icon> -->
		</view>

	</view>
</template>

<script>
	import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
	export default {
		components: {
			"picker-color": pickerColor,
		},
		// 分享好友
		onShareAppMessage(e) {
				console.log(e);
		//区分是button 页面按钮点击的分享还是 右上角三个点 menu点击的分享
				// if (e.from === 'button') {
				// 	return {
				// 		title: '分享',//分享标题
				// 		imageUrl: '/static/logo.png',//分享图片
				// 		path: '/pages/home/home'
				// 	}
				// }
				if (e.from === 'menu') {
					return {
						title: '分享',
						imageUrl: '/static/logo.png',
						path: '/pages/marquee/marquee'
					}
				}
			},
		name:"x",
		props: {
		
	
		},
		computed: {
		
		},
		data() {

			return {
				showSwitch:false,
				textWidth: 0,
				animationDuration: '10s', // 动画执行时间
				state: 'running', // 动画的开始和结束执行
				showText: '滚动字幕',
				playState: 'paused', //控制滚动
				bgColor: '#000',
				fontColor: '#fff',
				speed:5,
				showPopup: false,
				fontValue: 50,
				fontColorIndex: null, //当前字体色值下标
				bgColorIndex: null //当前背景色值下标
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				var vtext = this.showText.split();
				
				console.log('change', vtext);
			},
			/* 点击跑马灯 */
			clickMarquee() {
				this.playState = this.playState == 'play' ? 'paused' : 'play';
			},

			/* 设置项 */
			setting() {
				this.showPopup = true;
			},

			/* 弹窗关闭 */
			close() {
				this.showPopup = false;
				this.playState = 'play';
			},

			/* 字体颜色 */
			pickerFont({
				color,
				index
			}) {
				this.fontColor = color;
				this.fontColorIndex = index;
			},

			/* 背景颜色 */
			pickerBg({
				color,
				index
			}) {
				this.bgColor = color;
				this.bgColorIndex = index;
			},
		

			click() {
				this.$emit('click');
			}
		},
		watch: {

			playState(val) {
				if (val == 'play') this.state = 'running';
				else this.state = 'paused';
			
			}
		},
		mounted() {
			this.$nextTick(() => {
				// this.initSize();
			})
			
		}

	}
</script>

<style>
	.text_box {
		flex-wrap: nowrap;
		overflow: hidden;
		/* width: 100vw; */
		height: 100vh;
		background-color: black;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;

	}

	.mo1 {
		transform: rotate(90deg);
		/* background-color: red; */
		width: 100vh;
	}
	.mo2 {
		transform: rotate(90deg);
		/* background-color: red; */
		width: 100vh;
	}
	.mo2 span {
	
	}

	.text_box text {
		/* background-color: red; */
		color: #fff;
		/* word-break: keep-all; */
		/* font-size: var(fontValue); */
		/* background-color: blue; */
		/* overflow: hidden; */
		white-space: nowrap;
		/* text-align: center; */
		/* animation: move 10s linear infinite; */
		/* animation-play-state: var(--state); */
		display: block;
		text-align: center;
		width: min-content;
		animation: move var(--speed) linear infinite;
	}


	@keyframes move {
		0% {
			transform: translateX(100vh)
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.fixed-footer {
		position: fixed;
		bottom: 30px;
		right: 30px;
	}

	.popup-container {
		display: flex;
		width: 80vw;
		height: 60vh;
		padding: 20px;
		/* background-color: lemonchiffon; */
	}

	.popup-scroll {
		width: 50%;
		height: 100%;
	}

	.popup-container-left {
		padding-right: 10px;
	}

	.popup-container-right {
		padding-left: 10px;
	}

	.set-title {
		line-height: 2;
	}
	
	.mo2 span {
	    animation: LetterColor 3s linear infinite;
	    /* 计算每个字的动画起始时间 */
	    animation-delay: calc(0.1s * var(--o));
	}
	@keyframes LetterColor {
	    0% {
	        color: #fff;
	        /* 利用模糊距离不同的阴影实现霓虹灯光晕效果 */
	        text-shadow: 
	        0 0 10px #00b3ff,
	        0 0 20px #00b3ff,
	        0 0 40px #00b3ff,
	        0 0 80px #00b3ff,
	        0 0 120px #00b3ff,
	        0 0 200px #00b3ff,
	        0 0 300px #00b3ff,
	        0 0 500px #00b3ff;
	        /* 设置高斯模糊与色调，实现模糊效果和颜色变换 */
	        filter: blur(2px) hue-rotate(0deg);
	    }
	    30%,
	    70% {
	        color: #fff;
	        /* 减少光晕大小 */
	        text-shadow: 
	        0 0 10px #00b3ff,
	        0 0 20px #00b3ff,
	        0 0 40px #00b3ff,
	        0 0 80px #00b3ff,
	        0 0 120px #00b3ff,
	        0 0 200px #00b3ff;
	        /* 色调变换360度 */
	        filter: blur(2px) hue-rotate(360deg);
	    }
	    100% {
	        /* 动画结束字变透明 */
	        color: transparent;
	        /* 动画结束消除阴影 */
	        text-shadow: none;
	        /* 动画结束色调重置 */
	        filter: blur(2px) hue-rotate(0deg);
	    }
	}
	
	
	
</style>